
// 顶点着色器
const vs_s = `
  // 顶点坐标
  attribute vec4 a_Position;
  // 纹理坐标
  attribute vec2 a_TexCoord;
  // 向 片元着色器 传递 纹理坐标
  varying vec2 v_TexCoord;
  void main() {
    gl_Position = a_Position;
    v_TexCoord = a_TexCoord;
  }
`;
const fs_s = `
  precision mediump float;
  // 从顶点着色器接收纹理坐标
  varying vec2 v_TexCoord;
  // 取样器
  uniform sampler2D u_Sampler;
  void main() {
    // 使用 取样器 在 纹理对象中取 纹理坐标上的 纹素 颜色
    gl_FragColor = texture2D(u_Sampler, v_TexCoord);
  }
`;

function main() {
  const canvas = document.getElementById('webgl');
  if (!canvas) {
    alert('Field to get canvas by id = webgl');
    return false;
  }
  const gl = canvas.getContext('webgl');
  if (!gl) {
    alert('Field to get webgl context form canvas');
    return false;
  }
  if (!initShaders(gl, vs_s, fs_s)) {
    alert('Field to init shaders.');
    return false;
  }
  const pointCount = initVertexBuffer(gl);
  if (pointCount < 0) {
    alert('Field to init vertex buffer.');
    return false;
  }
  if (!initTexture(gl, pointCount)) {
    alert('Field to init texture.');
    return false;
  }

  gl.clearColor(0, 0, 0, 1);
  gl.clear(gl.COLOR_BUFFER_BIT);

  return true;
}

// 初始化顶点数据
function initVertexBuffer(gl) {
  const verticesTextures = new Float32Array([
    -1.0, +1.0, 0.0, +0.0, +1.0,
    -1.0, -1.0, 0.0, +0.0, +0.0,
    +1.0, +1.0, 0.0, +1.0, +1.0,
    +1.0, -1.0, 0.0, +1.0, +0.0,
  ]);

  // 创建缓存区
  const buffer = gl.createBuffer();
  if (!buffer) {
    alert('Field to create vertex buffer.');
    return -1;
  }
  // 绑定buffer
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  // 向buffer写入数据
  gl.bufferData(gl.ARRAY_BUFFER, verticesTextures, gl.STATIC_DRAW);

  const f_size = verticesTextures.BYTES_PER_ELEMENT;
  // attribute a_Position
  const a_Position = gl.getAttribLocation(gl.program, 'a_Position');
  gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, f_size * 5, 0);
  gl.enableVertexAttribArray(a_Position);
  // attribute a_TexCoord
  const a_TexCoord = gl.getAttribLocation(gl.program, 'a_TexCoord');
  gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, f_size * 5, f_size * 3);
  gl.enableVertexAttribArray(a_TexCoord);

  return Math.ceil(verticesTextures.length / 5);
}

// 处理纹理
function initTexture(gl, pointCount) {
  // 创建纹理
  const texture = gl.createTexture();
  // 取样器的存储参数
  const u_Sampler = gl.getUniformLocation(gl.program, 'u_Sampler');

  const image = new Image();
  image.onload = function () {
    loadTexture(gl, pointCount, texture, u_Sampler, image);
  }

  image.src = '../../resource/circle.gif';

  return true;
}

// 加载纹理
function loadTexture(gl, pointCount, texture, u_Sampler, image) {
  // 对纹理图像进行Y轴反转
  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
  // 激活0号纹理单元
  gl.activeTexture(gl.TEXTURE0);
  //绑定纹理
  gl.bindTexture(gl.TEXTURE_2D, texture);
  // 配置纹理参数
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT);
  // 配置纹理图像
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
  // 将 0号纹理单元 传入到 取样器
  gl.uniform1i(u_Sampler, 0);

  gl.drawArrays(gl.TRIANGLE_STRIP, 0, pointCount);
}